<template>
  <view class="settings-list">
    <view 
      v-for="setting in settings" 
      :key="setting.id" 
      class="setting-item"
      hover-class="item-hover"
      @click="$emit('select', setting)"
      :class="{ 'danger-item': setting.danger }"
    >
      <view class="setting-icon" :class="{ 'danger-icon': setting.danger }">
        <!-- <uni-icons :type="setting.icon" size="20" :color="setting.danger ? '#ff3b30' : '#00ffff'"></uni-icons> -->
		
		<!-- 使用条件渲染，根据图标类型显示不同的图片 -->
		<uni-icons v-if="iconExists(setting.icon)" :type="setting.icon" size="20" color="#ff00ff"></uni-icons>
		<image 
		  v-else 
		  :src="getIconSrc(setting.icon)" 
		  class="custom-icon-image" 
		  mode="aspectFit"
		></image>
	  </view>
      
      <view class="setting-info">
        <text class="setting-title" :class="{ 'danger-text': setting.danger }">{{ setting.title }}</text>
      </view>
      
      <view class="setting-right">
        <uni-icons type="right" size="16" color="rgba(255, 255, 255, 0.5)"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  settings: {
    type: Array,
    default: () => []
  }
});

defineEmits(['select']);

// 检查图标是否存在于uni-icons中
const iconExists = (iconName) => {
  // uni-icons中存在的图标
  const existingIcons = ['info'];
  return existingIcons.includes(iconName);
};

// 获取自定义图标的路径
const getIconSrc = (iconName) => {
  // 图标映射表
  const iconMap = {
    'shield': '/static/icons/shield.png',
	'bell' :  '/static/icons/bell.png',
	'lock' : '/static/icons/lock.png',
	'log-out' : "/static/icons/log-out.png",
  };
  
  return iconMap[iconName] || '/static/icons/default-icon.png';
};
</script>

<style>
.custom-icon-image {
  width: 20px;
  height: 20px;
}
	
.settings-list {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-sizing: border-box;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 0, 255, 0.2);
  box-sizing: border-box;
  width: 100%;
}

.setting-item:last-child {
  border-bottom: none;
}

.item-hover {
  background-color: rgba(255, 0, 255, 0.1);
}

.danger-item.item-hover {
  background-color: rgba(255, 59, 48, 0.1);
}

.setting-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  flex-shrink: 0;
}

.danger-icon {
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.setting-info {
  flex: 1;
  min-width: 0; /* 防止flex子项超出容器 */
  overflow: hidden; /* 防止内容溢出 */
}

.setting-title {
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.danger-text {
  color: #ff3b30;
}

.setting-right {
  display: flex;
  align-items: center;
  margin-left: 10px;
  flex-shrink: 0;
}
</style>
